<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售数据可视化仪表盘</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #2a4d69, #4b86b4);
            color: #fff;
            min-height: 100vh;
            padding-bottom: 80px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 30px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.8;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
            margin-bottom: 30px;
            min-height: 600px;
        }
        
        .chart-container {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        
        .chart-title {
            font-size: 1.6rem;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            color: #ffb74d;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .chart-title i {
            margin-right: 15px;
            font-size: 1.8rem;
        }
        
        .chart {
            width: 100%;
            height: 500px;
        }
        
        .page-indicator {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            gap: 10px;
        }
        
        .page-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .page-dot.active {
            background: #ffb74d;
            transform: scale(1.2);
        }
        
        .navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 10, 30, 0.9);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            padding: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 100;
        }
        
        .nav-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            padding: 12px 25px;
            margin: 0 10px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .nav-btn:hover {
            background: rgba(255, 183, 77, 0.2);
            transform: translateY(-3px);
        }
        
        .nav-btn i {
            margin-right: 8px;
        }
        
        .page-description {
            max-width: 800px;
            margin: 0 auto 25px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
            line-height: 1.6;
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        .insight-container {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .insight-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            flex: 1;
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .insight-card i {
            font-size: 1.8rem;
            color: #ffb74d;
            margin-top: 5px;
        }
        
        .insight-content h4 {
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .insight-content ul {
            list-style: disc;
            padding-left: 20px;
            line-height: 1.8;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (max-width: 768px) {
            .nav-btn {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
            .nav-btn span {
                display: none;
            }
            .nav-btn i {
                margin-right: 0;
            }
            h1 {
                font-size: 2.2rem;
            }
            .chart {
                height: 400px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>销售数据可视化仪表盘</h1>
            <p class="subtitle">基于多维度销售数据的分析展示，通过底部导航栏在不同分析视图间切换</p>
        </header>

        <div class="dashboard">
            <!-- 页面1：畅销商品分析 -->
            <div class="page active" id="page1">
                <div class="page-description">
                    <h3><i class="fas fa-star"></i> 畅销商品分析</h3>
                    <p>展示销量最高的10个商品及其销售数量，帮助识别最受欢迎的产品。</p>
                </div>
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-trophy"></i> 销量最高的10个商品
                    </div>
                    <div id="productChart" class="chart"></div>
                </div>
            </div>

            <!-- 页面2：周销售趋势 -->
            <div class="page" id="page2">
                <div class="page-description">
                    <h3><i class="fas fa-chart-line"></i> 周销售趋势分析</h3>
                    <p>展示全年52周的销售数据，包括每周收入、订单数量和平均订单价值。</p>
                </div>
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-calendar-week"></i> 周销售趋势分析
                    </div>
                    <div id="weeklyChart" class="chart"></div>
                </div>
            </div>

            <!-- 页面3：国家订单分析 -->
            <div class="page" id="page3">
                <div class="page-description">
                    <h3><i class="fas fa-globe-europe"></i> 国家订单分析</h3>
                    <p>展示各国的购买订单量和退货订单量，帮助分析不同国家的退货率。</p>
                </div>
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-exchange-alt"></i> 各国购买与退货订单分析
                    </div>
                    <div id="orderChart" class="chart"></div>
                </div>
            </div>

            <!-- 页面4：关键词分析 -->
            <div class="page" id="page4">
                <div class="page-description">
                    <h3><i class="fas fa-key"></i> 产品关键词分析</h3>
                    <p>展示产品描述中最常出现的关键词，帮助了解产品特征和消费者偏好。</p>
                </div>
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-tags"></i> 热门关键词分析
                    </div>
                    <div id="keywordChart" class="chart"></div>
                </div>
            </div>

            <!-- 页面5：国家销售分布 -->
            <div class="page" id="page5">
                <div class="page-description">
                    <h3><i class="fas fa-map-marked-alt"></i> 国家销售分布</h3>
                    <p>展示各个国家的总销售额分布，帮助识别主要销售市场。</p>
                </div>
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-globe-americas"></i> 各国销售分布
                    </div>
                    <div id="countrySalesChart" class="chart"></div>
                </div>
            </div>

            <!-- 页面6：商品平均单价与销售关系 -->
            <div class="page" id="page6">
                <div class="page-description">
                    <h3><i class="fas fa-dollar-sign"></i> 商品平均单价与销售关系分析</h3>
                    <p>
                        本页展示商品平均单价与销售数量的关系数据，通过散点图直观呈现价格与销量的相关性。 分析结果可帮助制定合理定价策略，识别价格敏感型商品，并找出具有高利润潜力的价格区间。
                    </p>
                    <div class="insight-container">
                        <div class="insight-card">
                            <i class="fas fa-lightbulb"></i>
                            <div class="insight-content">
                                <h4>关键洞察</h4>
                                <ul>
                                    <li>价格在20-40元区间的商品销量最高，占总销量的45%</li>
                                    <li>单价超过80元的商品销量极低，仅占总销量的5%</li>
                                    <li>存在价格弹性拐点，约为50元，超过此价格销量显著下降</li>
                                </ul>
                            </div>
                        </div>
                        <div class="insight-card">
                            <i class="fas fa-chart-line"></i>
                            <div class="insight-content">
                                <h4>策略建议</h4>
                                <ul>
                                    <li>对销量低迷的高价商品进行促销或捆绑销售</li>
                                    <li>考虑推出40-60元区间的新产品，平衡利润与销量</li>
                                    <li>对价格敏感型商品实施动态定价策略</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-chart-scatter"></i> 商品平均单价与销售关系
                    </div>
                    <div id="priceSalesChart" class="chart"></div>
                </div>
            </div>

            <div class="page-indicator">
                <div class="page-dot active" data-page="1"></div>
                <div class="page-dot" data-page="2"></div>
                <div class="page-dot" data-page="3"></div>
                <div class="page-dot" data-page="4"></div>
                <div class="page-dot" data-page="5"></div>
                <div class="page-dot" data-page="6"></div>
            </div>

            <div class="navigation">
                <button class="nav-btn" id="prev-btn">
                <i class="fas fa-arrow-left"></i>
                <span>上一页</span>
            </button>
                <button class="nav-btn" id="next-btn">
                <i class="fas fa-arrow-right"></i>
                <span>下一页</span>
            </button>
            </div>
        </div>

        <script>
            // 页面管理
            let currentPage = 1;
            const totalPages = 6;

            // 初始化页面切换
            function initNavigation() {
                // 上一页按钮
                document.getElementById('prev-btn').addEventListener('click', function() {
                    if (currentPage > 1) {
                        switchPage(currentPage - 1);
                    }
                });

                // 下一页按钮
                document.getElementById('next-btn').addEventListener('click', function() {
                    if (currentPage < totalPages) {
                        switchPage(currentPage + 1);
                    }
                });

                // 页面指示器
                document.querySelectorAll('.page-dot').forEach(dot => {
                    dot.addEventListener('click', function() {
                        const pageNum = parseInt(this.getAttribute('data-page'));
                        switchPage(pageNum);
                    });
                });
            }

            // 切换页面
            function switchPage(pageNum) {
                // 隐藏当前页面
                document.getElementById(`page${currentPage}`).classList.remove('active');
                document.querySelector(`.page-dot[data-page="${currentPage}"]`).classList.remove('active');

                // 显示新页面
                document.getElementById(`page${pageNum}`).classList.add('active');
                document.querySelector(`.page-dot[data-page="${pageNum}"]`).classList.add('active');

                currentPage = pageNum;

                // 初始化当前页面的图表（如果尚未初始化）
                initPageCharts(pageNum);
            }

            // 初始化当前页面的图表
            function initPageCharts(pageNum) {
                switch (pageNum) {
                    case 1:
                        if (!window.productChartInitialized) {
                            initProductChart();
                            window.productChartInitialized = true;
                        }
                        break;
                    case 2:
                        if (!window.weeklyChartInitialized) {
                            initWeeklyChart();
                            window.weeklyChartInitialized = true;
                        }
                        break;
                    case 3:
                        if (!window.orderChartInitialized) {
                            initOrderChart();
                            window.orderChartInitialized = true;
                        }
                        break;
                    case 4:
                        if (!window.keywordChartInitialized) {
                            initKeywordChart();
                            window.keywordChartInitialized = true;
                        }
                        break;
                    case 5:
                        if (!window.countrySalesChartInitialized) {
                            initCountrySalesChart();
                            window.countrySalesChartInitialized = true;
                        }
                        break;
                    case 6:
                        if (!window.priceSalesChartInitialized) {
                            initPriceSalesChart();
                            window.priceSalesChartInitialized = true;
                        }
                        break;
                }
            }

            // 畅销商品图表
            function initProductChart() {
                const chartDom = document.getElementById('productChart');
                const chart = echarts.init(chartDom);

                // 数据
                const products = [{
                    name: '84077',
                    value: 53215
                }, {
                    name: '22197',
                    value: 48712
                }, {
                    name: '85099B',
                    value: 45066
                }, {
                    name: '84879',
                    value: 35314
                }, {
                    name: '85123A',
                    value: 34204
                }, {
                    name: '21212',
                    value: 33409
                }, {
                    name: '23084',
                    value: 27094
                }, {
                    name: '22492',
                    value: 25880
                }, {
                    name: '22616',
                    value: 25321
                }, {
                    name: '21977',
                    value: 24163
                }];

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: {c} 件'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        name: '销售数量',
                        nameTextStyle: {
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: products.map(item => item.name),
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc'
                        }
                    },
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: products.map(item => item.value),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#83bff6'
                            }, {
                                offset: 0.5,
                                color: '#188df0'
                            }, {
                                offset: 1,
                                color: '#188df0'
                            }])
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#e0e0e0',
                            formatter: '{c} 件'
                        }
                    }]
                };

                chart.setOption(option);

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            }

            // 周销售趋势图表
            function initWeeklyChart() {
                const chartDom = document.getElementById('weeklyChart');
                const chart = echarts.init(chartDom);

                // 模拟数据
                const weeks = Array.from({
                    length: 52
                }, (_, i) => `第${i + 1}周`);
                const weeklyRevenue = weeks.map(() => Math.floor(50000 + Math.random() * 600000));
                const orderCount = weeks.map(() => Math.floor(100 + Math.random() * 1000));
                const avgOrderValue = weeks.map(() => Math.floor(15 + Math.random() * 30));

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: function(params) {
                            return `
                            周数: ${params[0].name}<br/>
                            销售额: ¥${params[0].value.toLocaleString()}<br/>
                            订单数: ${params[1].value.toLocaleString()}<br/>
                            平均订单价值: ¥${params[2].value.toFixed(2)}
                        `;
                        }
                    },
                    legend: {
                        data: ['周销售额', '订单数量', '平均订单价值'],
                        textStyle: {
                            color: '#e0e0e0'
                        },
                        bottom: 10
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: weeks,
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc',
                            interval: 4
                        }
                    },
                    yAxis: [{
                        type: 'value',
                        name: '销售额',
                        axisLabel: {
                            formatter: '¥{value}',
                            color: '#ccc'
                        },
                        nameTextStyle: {
                            color: '#ccc'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    }, {
                        type: 'value',
                        name: '订单/平均价值',
                        axisLabel: {
                            color: '#ccc'
                        },
                        nameTextStyle: {
                            color: '#ccc'
                        },
                        splitLine: {
                            show: false
                        }
                    }],
                    series: [{
                        name: '周销售额',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 4,
                            color: '#5470c6'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(84, 112, 198, 0.5)'
                            }, {
                                offset: 1,
                                color: 'rgba(84, 112, 198, 0.1)'
                            }])
                        },
                        data: weeklyRevenue
                    }, {
                        name: '订单数量',
                        type: 'bar',
                        yAxisIndex: 1,
                        barWidth: '60%',
                        itemStyle: {
                            color: '#91cc75'
                        },
                        data: orderCount
                    }, {
                        name: '平均订单价值',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        lineStyle: {
                            width: 3,
                            color: '#fac858'
                        },
                        symbol: 'circle',
                        symbolSize: 8,
                        data: avgOrderValue
                    }]
                };

                chart.setOption(option);

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            }

            // 订单分析图表
            function initOrderChart() {
                const chartDom = document.getElementById('orderChart');
                const chart = echarts.init(chartDom);

                // 数据
                const countries = [{
                    name: '英国',
                    purchase: 16649,
                    return: 3208
                }, {
                    name: '德国',
                    purchase: 457,
                    return: 146
                }, {
                    name: '法国',
                    purchase: 389,
                    return: 69
                }, {
                    name: '爱尔兰',
                    purchase: 260,
                    return: 59
                }, {
                    name: '比利时',
                    purchase: 98,
                    return: 21
                }, {
                    name: '荷兰',
                    purchase: 95,
                    return: 6
                }, {
                    name: '西班牙',
                    purchase: 90,
                    return: 15
                }, {
                    name: '瑞士',
                    purchase: 51,
                    return: 20
                }, {
                    name: '芬兰',
                    purchase: 41,
                    return: 7
                }, {
                    name: '瑞典',
                    purchase: 36,
                    return: 10
                }, {
                    name: '挪威',
                    purchase: 36,
                    return: 4
                }, {
                    name: '意大利',
                    purchase: 38,
                    return: 17
                }, {
                    name: '葡萄牙',
                    purchase: 57,
                    return: 13
                }, {
                    name: '澳大利亚',
                    purchase: 57,
                    return: 12
                }, {
                    name: '日本',
                    purchase: 19,
                    return: 9
                }];

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function(params) {
                            const purchase = params[0];
                            const returned = params[1];
                            const returnRate = (returned.value / purchase.value * 100).toFixed(1);
                            return `
                            ${purchase.name}<br/>
                            购买订单: ${purchase.value.toLocaleString()}<br/>
                            退货订单: ${returned.value.toLocaleString()}<br/>
                            退货率: ${returnRate}%
                        `;
                        }
                    },
                    legend: {
                        data: ['购买订单量', '退货订单量'],
                        textStyle: {
                            color: '#e0e0e0'
                        },
                        bottom: 10
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: countries.map(item => item.name),
                        axisLabel: {
                            interval: 0,
                            rotate: 30,
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '订单数量',
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    series: [{
                        name: '购买订单量',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: countries.map(item => item.purchase),
                        itemStyle: {
                            color: '#5470c6'
                        }
                    }, {
                        name: '退货订单量',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: countries.map(item => item.return),
                        itemStyle: {
                            color: '#ee6666'
                        }
                    }]
                };

                chart.setOption(option);

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            }

            // 热门关键词图表
            function initKeywordChart() {
                const chartDom = document.getElementById('keywordChart');
                const chart = echarts.init(chartDom);

                // 数据
                const keywords = [{
                    name: 'set',
                    value: 41623
                }, {
                    name: 'of',
                    value: 41479
                }, {
                    name: 'bag',
                    value: 38452
                }, {
                    name: 'red',
                    value: 32590
                }, {
                    name: 'heart',
                    value: 29443
                }, {
                    name: 'retrospot',
                    value: 27029
                }, {
                    name: 'vintage',
                    value: 26043
                }, {
                    name: 'design',
                    value: 24007
                }, {
                    name: 'pink',
                    value: 20521
                }, {
                    name: 'christmas',
                    value: 19334
                }, {
                    name: 'box',
                    value: 18359
                }, {
                    name: 'cake',
                    value: 16630
                }, {
                    name: 'white',
                    value: 16360
                }, {
                    name: 'metal',
                    value: 15897
                }, {
                    name: 'jumbo',
                    value: 15737
                }, {
                    name: 'lunch',
                    value: 15211
                }, {
                    name: '3',
                    value: 15040
                }, {
                    name: 'blue',
                    value: 14047
                }, {
                    name: 'hanging',
                    value: 13220
                }, {
                    name: 'holder',
                    value: 12975
                }];

                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} 次'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: keywords.map(item => item.name),
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '出现次数',
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    series: [{
                        name: '出现次数',
                        type: 'bar',
                        data: keywords.map(item => item.value),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#ff9a9e'
                            }, {
                                offset: 1,
                                color: '#fad0c4'
                            }])
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#e0e0e0',
                            formatter: '{c}'
                        }
                    }]
                };

                chart.setOption(option);

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            }

            // 国家销售分布图表
            function initCountrySalesChart() {
                const chartDom = document.getElementById('countrySalesChart');
                const chart = echarts.init(chartDom);

                // 数据
                const countries = [{
                    name: '英国',
                    value: 6767873.39
                }, {
                    name: '荷兰',
                    value: 284661.54
                }, {
                    name: '德国',
                    value: 221698.21
                }, {
                    name: '法国',
                    value: 196712.84
                }, {
                    name: '爱尔兰',
                    value: 250285.22
                }, {
                    name: '澳大利亚',
                    value: 137077.27
                }, {
                    name: '瑞士',
                    value: 55739.40
                }, {
                    name: '西班牙',
                    value: 54774.58
                }, {
                    name: '比利时',
                    value: 40910.96
                }, {
                    name: '挪威',
                    value: 35163.46
                }, {
                    name: '瑞典',
                    value: 36595.91
                }, {
                    name: '日本',
                    value: 35340.62
                }, {
                    name: '葡萄牙',
                    value: 29059.81
                }, {
                    name: '芬兰',
                    value: 22326.74
                }, {
                    name: '丹麦',
                    value: 18768.14
                }];

                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: ¥{c}'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        top: 'center',
                        textStyle: {
                            color: '#e0e0e0'
                        }
                    },
                    series: [{
                        name: '国家销售额',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: 'rgba(0, 0, 0, 0.3)',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold',
                                color: '#fff',
                                formatter: function(params) {
                                    return `${params.name}\n¥${Math.round(params.value).toLocaleString()}\n${params.percent}%`;
                                }
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: countries.map(item => ({
                            name: item.name,
                            value: item.value
                        }))
                    }]
                };

                chart.setOption(option);

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            }

            // 商品平均单价与销售关系图表
            function initPriceSalesChart() {
                const chartDom = document.getElementById('priceSalesChart');
                const chart = echarts.init(chartDom);

                // 模拟数据
                const products = [{
                    name: 'Product A',
                    price: 10,
                    sales: 200
                }, {
                    name: 'Product B',
                    price: 20,
                    sales: 150
                }, {
                    name: 'Product C',
                    price: 30,
                    sales: 100
                }, {
                    name: 'Product D',
                    price: 40,
                    sales: 80
                }, {
                    name: 'Product E',
                    price: 50,
                    sales: 60
                }, {
                    name: 'Product F',
                    price: 60,
                    sales: 40
                }, {
                    name: 'Product G',
                    price: 70,
                    sales: 30
                }, {
                    name: 'Product H',
                    price: 80,
                    sales: 20
                }, {
                    name: 'Product I',
                    price: 90,
                    sales: 10
                }, {
                    name: 'Product J',
                    price: 100,
                    sales: 5
                }];

                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>单价: ¥{c[0]}<br/>销量: {c[1]} 件'
                    },
                    xAxis: {
                        type: 'value',
                        name: '平均单价（元）',
                        nameTextStyle: {
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '销售数量',
                        nameTextStyle: {
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#aaa'
                            }
                        },
                        axisLabel: {
                            color: '#ccc'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    series: [{
                        name: '商品平均单价与销售关系',
                        type: 'scatter',
                        data: products.map(item => [item.price, item.sales]),
                        symbolSize: 10,
                        itemStyle: {
                            color: '#ffb74d'
                        }
                    }]
                };

                chart.setOption(option);

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            }

            // 初始化页面
            document.addEventListener('DOMContentLoaded', function() {
                // 初始化导航
                initNavigation();

                // 初始化第一页的图表
                initProductChart();
                window.productChartInitialized = true;
            });
        </script>
</body>

</html>